<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="../../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../../css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
<style type="text/css">
	.checkDiv table{border-right:1px solid #ccc;border-bottom:1px solid #ccc;width:99%;} 
	.checkDiv table tr {height: 40px;}
	.checkDiv table tr td{border-left:1px solid #ccc;border-top:1px solid #ccc;}
	.checkDiv table tr.ddt:hover {background-color: #ecf3f8}
</style>
</head>
<body>
    <div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 queryDiv" style="width: 99%">
        		<header style="height: 5%;font-size:15px;font-weight: bold;margin-top: 8px">
        		可选用户列表：
        		</header>
                <header style="height: 95%;margin-top: 10px">
                    <div align="left">
	                    <table style="width: 100%">
	                   		<tr>
	                   			<td>
									<form class="form-inline" onsubmit="return false">
										<div class="form-group"  style="width: 100%">
											选择机构：
											<select class="form-control input-sm" id="orgSelect" style="width:258px">
												
											</select>
											关键字：<input id="username" type="text" class="form-control" placeholder="用户名/用户姓名" style="width:150px">
											<button id="searchBt" class="layui-btn layui-btn-sm" style="float:right;"><i class="layui-icon">&#xe615;</i>搜索</button>
										</div>
									</form>
								</td>
	                   		</tr> 
	                    </table>
					</div>
                </header>
                
                <div>
                    <div class="widget-body no-padding">
                        <table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
                            <thead>
                                <tr>
                                </tr>
                                <tr>
                               		<th style="width:30px"></th>
                                    <th>用户名</th>
									<th>用户姓名</th>
									<th>机构</th>
									<th>角色</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
        </div>
        <input type="hidden" id="ids" >
		<input type="hidden" id="names" >
    </div>
</body>
<script type="text/javascript" src="../../js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript">
var type = GetQueryString("type");//页面展示类型
var checkbox = GetQueryString("checkbox");//多选操作
var ids = [];
var names = [];
function initData(){
	if($("#ids").val())
		ids = $("#ids").val().split(',');
	if($("#names").val())
		names = $("#names").val().split(',');
}
layui.use([ 'layer' ], function() {
	var layer = layui.layer;
});
$(function(){
	$("#searchBt").click(function(){
		example.ajax.reload();
	});
});
var example;
function initOrgData(){
	$.ajax({
		type : 'get',
		url : urlRootPrefix + '/users/currentshort',
		contentType : 'application/json',
		success : function(data) {
			if (data.statusCode == "0") {
				var user = data.data;
				if(user){
					$.ajax({
						type : 'get',
						url : urlRootPrefix + '/orgs/all?all=false',
						contentType : 'application/json',
						success : function(data) {
							if (data.statusCode == "0") {
								var cc = data.data;
								if(cc){
									var first = "";
									for(var i = 0;i < cc.length;i++){
										if(cc[i].orgId==user.orgId){
											first = '<option value="'+cc[i].orgId+'" selected>'+cc[i].orgName+'</option>';
										}else{
											$("#orgSelect").append('<option value="'+cc[i].orgId+'">'+cc[i].orgName+'</option>');
										}
									}
									$("#orgSelect").prepend(first);
								}
								init();
								$("#orgSelect").change(function(){
									example.ajax.reload();
								});
							} else {
								alert(data.msg);
							}
						}
					});
				}
			} else {
				alert(data.msg);
			}
		}
	});
}
function init(){
	example = 
    	$('#dt-table').DataTable({
    		"select": true,
        	"searching": false,
        	"processing": false,
        	"serverSide" : true,
        	"ordering": false, // 禁止排序
        	"language": {
                "url": urlRootPrefix +"/js/plugin/datatables/Chinese.lang"
            },
        	"ajax": {
        		"url" : urlRootPrefix +"/users",
        		"type":"get",
        		"data":function(d){
    				d.userName = $('#username').val();
    				d.userAcct = $('#username').val();
    				d.orgId = $("#orgSelect").val();
        		},
    			"dataSrc" : function(data) {
  				  //自定义错误拦截
   		          if(!data.success && !isNotBlank(data.recordsTotal)){
   		           	layer.msg(data.msg, {shift: -1, time: 3000}, function(){});
   					return [];
   				  }
   		          return data.data;
    			} 
        	},
        	"dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'col-sm-10 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-10' p v>>",	
            "columns": [
            	{ "data": "userId", "defaultContent": "","render": function (data, type, row) {
            			return "<div align='center'><input type='"+(checkbox==1?"checkbox":"radio")+"' "+(ids.indexOf(data) > -1 ?'checked':'')+" name='ckbquery' id='ckbquery"+data+"' value='" + data + "' valuen = '"+row.userNameNew+"("+row.orgName+")'></div>" ;
              		}
            	},
                { "data": "username", "defaultContent": ""},
                { "data": "userNameNew", "defaultContent": ""},
                { "data": "orgName", "defaultContent": ""},
                { "data": "roleName", "defaultContent": ""}
            ],"drawCallback":function(s){
                $(".queryDiv #dt-table tbody tr,.queryDiv #dt-table tbody tr div input").click(function(event) {
                	var isc;
                	var vid;
                	var vname;
                	if($(this).prop("tagName") == "TR"){
	                	if($(this).find("input").is(':checked')){
	                		isc = false;
	                		$(this).find("input").prop('checked', isc);
	                	}else{
	                		isc = true;
	                		$(this).find("input").prop('checked', isc);
	                	}
	                	vid = $(this).find("input").attr("value");
	                	vname = $(this).find("input").attr("valuen");
                	}else{
	                	isc = $(this).is(':checked');
	                	vid = $(this).attr("value");
	                	vname = $(this).attr("valuen");
	                	event.stopPropagation();//不触发父元素事件
                	}
                	if(checkbox == 1){
	                	var index = ids.indexOf(vid);//该值在数组中的位置
	                	if(index == -1){
	                		ids.push(vid);
	                		names.push(vname);
	                	}else{
	                		ids.splice(index, 1); 
	                		names.splice(index, 1); 
	                	}
	                	$("#ids").val(ids.join(","));
	                	$("#names").val(names.join(","));
                	}else{
                		$("#ids").val(vid);
	                	$("#names").val(vname);
                	}
                });
            }
        } );
}
</script>
</html>